<template>
	<view class="pt90 pm100">
		<view class="row">
			<view class="kknnjhneert">
				<image src="../../static/img/chekuang/hhhjjksd.png" class="dfrtyuyywer" mode="widthFix"></image>
			</view>
			<view class="col">
				<view class="jdrow">
					<view class="fz28 z9">
						今日评分 <text class="fz50 cf b ml20">9.6</text>
					</view>
					<view class="kkjnmjjxe">
						<view class="jhnnnbhhxe" style="width: 80%;"></view>
					</view>
				</view>
				<view class="jdrow mt130">
					<view class="fz28 z9">
						本周评分 <text class="fz50 cf b ml20">9.6</text>
					</view>
					<view class="kkjnmjjxe">
						<view class="jhnnnbhhxe ab" style="width: 80%;"></view>
					</view>
				</view>

				<view class="jdrow mt130">
					<view class="fz28 z9">
						本月评分 <text class="fz50 cf b ml20">9.6</text>
					</view>
					<view class="kkjnmjjxe">
						<view class="jhnnnbhhxe ac" style="width: 80%;"></view>
					</view>
				</view>


				<view class="jdrow mt130">
					<view class="fz28 z9">
						本年评分 <text class="fz50 cf b ml20">9.6</text>
					</view>
					<view class="kkjnmjjxe">
						<view class="jhnnnbhhxe ad" style="width: 80%;"></view>
					</view>
				</view>


				<view class="jdrow mt130">
					<view class="fz28 z9">
						综合评分 <text class="fz50 cf b ml20">9.6</text>
					</view>
					<view class="kkjnmjjxe">
						<view class="jhnnnbhhxe ae" style="width: 80%;"></view>
					</view>
				</view>


			</view>
		</view>
		<view class="mt90 pd ">
			<view class="fz28 z9">
				行程建议
			</view>
			<view class="fz28 cf mt30">
				行程建议行程建议行程建议行程建议行程建议行程建议 行程建议行程建议行程建议行程建议
			</view>
		</view>
	
	<uni-calendar ref="calendar" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate" :range="info.range" @confirm="confirm" />
	
	</view>
</template>
<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		data() {
			return {
				info: {
					date: '2019-08-15',
					startDate: '2019-06-15',
					endDate: '2019-010-15',
					lunar: true,
					range: true,
					insert: false,
					selected: []
				}
			}
		},
		onNavigationBarButtonTap() {
			this.$refs.calendar.open()
		},
		components: {
			uniCalendar
		},
		methods: {},
		mounted() {}
	}
</script>
<style scoped>
	.kknnjhneert {
		width: 420upx;
	}

	.dfrtyuyywer {
		width: 440upx;
		position: relative;
		left: -120upx;
	}

	.kkjnmjjxe {
		width: 220upx;
		height: 4upx;
		background: rgba(53, 60, 81, 1);
		border-radius: 12upx;
		margin-top: 16upx;
		position: relative;
	}

	.jhnnnbhhxe {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		background-color: #6D8BEF;
	}
	.jhnnnbhhxe.ab{
		background-color: #4ED6BA;
	}
	.jhnnnbhhxe.ac{
		background-color: #65D0DC;
	}
	.jhnnnbhhxe.ad{
		background-color: #1689D5;
	}
	.jhnnnbhhxe.ae{
		background-color: #1BD5B9;
	}
</style>
